<!-- 仪表盘统计卡片 -->
<div class="row g-4 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="text-uppercase text-muted mb-2">云账号</h6>
                        <h2 class="mb-0 text-primary">{{ cloud_accounts_count }}</h2>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-primary bg-gradient">
                            <i class="bi bi-cloud-check"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="text-uppercase text-muted mb-2">域名</h6>
                        <h2 class="mb-0 text-success">{{ domains_count }}</h2>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-success bg-gradient">
                            <i class="bi bi-globe"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="text-uppercase text-muted mb-2">DNS记录</h6>
                        <h2 class="mb-0 text-info">{{ records_count }}</h2>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-info bg-gradient">
                            <i class="bi bi-dns"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="text-uppercase text-muted mb-2">今日操作</h6>
                        <h2 class="mb-0 text-warning">{{ recent_logs|length }}</h2>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-warning bg-gradient">
                            <i class="bi bi-activity"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 快速操作 -->
<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h5 class="card-title mb-0">
                    <i class="bi bi-lightning-charge text-primary me-2"></i>快速操作
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <a href="{% url 'create_cloud_account' %}" class="btn btn-outline-primary w-100 py-3">
                            <i class="bi bi-cloud-plus mb-2 d-block" style="font-size: 1.5rem;"></i>
                            添加云账号
                        </a>
                    </div>
                    <div class="col-md-6">
                        <a href="{% url 'create_domain' %}" class="btn btn-outline-success w-100 py-3">
                            <i class="bi bi-globe-americas mb-2 d-block" style="font-size: 1.5rem;"></i>
                            添加域名
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <h5 class="card-title mb-0">
                    <i class="bi bi-info-circle text-info me-2"></i>系统信息
                </h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <small class="text-muted">当前用户：</small>
                        <span class="fw-semibold">{{ user.username }}</span>
                    </li>
                    <li class="mb-2">
                        <small class="text-muted">最后登录：</small>
                        <span class="text-muted">{{ user.last_login|date:"Y-m-d H:i" }}</span>
                    </li>
                    <li class="mb-0">
                        <small class="text-muted">系统版本：</small>
                        <span class="text-success">v1.0.0</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 最近操作日志 -->
{% if recent_logs %}
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">
            <i class="bi bi-clock-history text-secondary me-2"></i>最近操作
        </h5>
        <a href="{% url 'operation_logs' %}" class="btn btn-sm btn-outline-secondary">
            查看全部 <i class="bi bi-arrow-right"></i>
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <tbody>
                    {% for log in recent_logs %}
                    <tr>
                        <td style="width: 60px;">
                            {% if log.action == 'create' %}
                                <div class="action-icon bg-success">
                                    <i class="bi bi-plus"></i>
                                </div>
                            {% elif log.action == 'update' %}
                                <div class="action-icon bg-warning">
                                    <i class="bi bi-pencil"></i>
                                </div>
                            {% elif log.action == 'delete' %}
                                <div class="action-icon bg-danger">
                                    <i class="bi bi-trash"></i>
                                </div>
                            {% else %}
                                <div class="action-icon bg-info">
                                    <i class="bi bi-arrow-repeat"></i>
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            <div class="fw-semibold">{{ log.get_action_display }}</div>
                            <small class="text-muted">{{ log.description }}</small>
                        </td>
                        <td class="text-end">
                            <small class="text-muted">{{ log.created_at|date:"m-d H:i" }}</small>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<style>
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.action-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}
</style>